<!doctype html>




<html class="theme-next pisces" lang="zh-Hans">
<head>
  <meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>



<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />












  
  
    
  
  <link href="//cdn.staticfile.org/fancybox/2.1.5/jquery.fancybox.min.css" rel="stylesheet" type="text/css" />




  
  
  
  

  
    
    
  

  
    
      
    

    
  

  

  
    
      
    

    
  

  
    
      
    

    
  

  
    
    
    <link href="//fonts.lug.ustc.edu.cn/css?family=Monda:300,300italic,400,400italic,700,700italic|Roboto Slab:300,300italic,400,400italic,700,700italic|Lobster Two:300,300italic,400,400italic,700,700italic|PT Mono:300,300italic,400,400italic,700,700italic&subset=latin,latin-ext" rel="stylesheet" type="text/css">
  






  

<link href="//cdn.staticfile.org/font-awesome/4.6.2/css/font-awesome.min.css" rel="stylesheet" type="text/css" />

<link href="/css/main.css?v=5.1.0" rel="stylesheet" type="text/css" />


  <meta name="keywords" content="Web,JavaScript," />








  <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico?v=5.1.0" />






<meta name="description" content="前言在 ECMAScript 中，引用类型是一种数据结构，用于将数据和功能组织在一起。它也常被称为类，但这种称呼并不妥当。ECMAScript 不具备传统的面向对象语言所支持的类和接口等基本结构。引用类型有时候也被称为对象定义，因为它们描述的是一类对象所具有的属性和方法。
虽然引用类型与类看起来相似，但它们并不是相同的概念。对象(Object)是某个特定引用类型的实例。新对象是使用 new 操作符">
<meta property="og:type" content="article">
<meta property="og:title" content="《 JavaScript 高级程序设计》备忘-第五章-1">
<meta property="og:url" content="http://codingme.xyz/2016/09/17/javascript-note-05-1/index.html">
<meta property="og:site_name" content="CodingMe">
<meta property="og:description" content="前言在 ECMAScript 中，引用类型是一种数据结构，用于将数据和功能组织在一起。它也常被称为类，但这种称呼并不妥当。ECMAScript 不具备传统的面向对象语言所支持的类和接口等基本结构。引用类型有时候也被称为对象定义，因为它们描述的是一类对象所具有的属性和方法。
虽然引用类型与类看起来相似，但它们并不是相同的概念。对象(Object)是某个特定引用类型的实例。新对象是使用 new 操作符">
<meta property="og:updated_time" content="2016-10-15T09:47:56.568Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="《 JavaScript 高级程序设计》备忘-第五章-1">
<meta name="twitter:description" content="前言在 ECMAScript 中，引用类型是一种数据结构，用于将数据和功能组织在一起。它也常被称为类，但这种称呼并不妥当。ECMAScript 不具备传统的面向对象语言所支持的类和接口等基本结构。引用类型有时候也被称为对象定义，因为它们描述的是一类对象所具有的属性和方法。
虽然引用类型与类看起来相似，但它们并不是相同的概念。对象(Object)是某个特定引用类型的实例。新对象是使用 new 操作符">



<script type="text/javascript" id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/',
    scheme: 'Pisces',
    sidebar: {"position":"right","display":"post"},
    fancybox: true,
    motion: false,
    duoshuo: {
      userId: '0',
      author: '博主'
    },
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    }
  };
</script>



  <link rel="canonical" href="http://codingme.xyz/2016/09/17/javascript-note-05-1/"/>





  <title> 《 JavaScript 高级程序设计》备忘-第五章-1 | CodingMe </title>
</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans">

  










  
  
    
  

  <div class="container one-collumn sidebar-position-right page-post-detail ">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-meta ">
  

  <div class="custom-logo-site-title">
    <a href="/"  class="brand" rel="start">
      <span class="logo-line-before"><i></i></span>
      <span class="site-title">CodingMe</span>
      <span class="logo-line-after"><i></i></span>
    </a>
  </div>
  <p class="site-subtitle"></p>
</div>

<div class="site-nav-toggle">
  <button>
    <span class="btn-bar"></span>
    <span class="btn-bar"></span>
    <span class="btn-bar"></span>
  </button>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-home">
          <a href="/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-home"></i> <br />
            
            首页
          </a>
        </li>
      
        
        <li class="menu-item menu-item-about">
          <a href="/about" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-user"></i> <br />
            
            关于
          </a>
        </li>
      
        
        <li class="menu-item menu-item-archives">
          <a href="/archives" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-archive"></i> <br />
            
            归档
          </a>
        </li>
      
        
        <li class="menu-item menu-item-tags">
          <a href="/tags" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-tags"></i> <br />
            
            标签
          </a>
        </li>
      
        
        <li class="menu-item menu-item-categories">
          <a href="/categories" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-th"></i> <br />
            
            分类
          </a>
        </li>
      

      
        <li class="menu-item menu-item-search">
          
            <a href="javascript:;" class="popup-trigger">
          
            
              <i class="menu-item-icon fa fa-search fa-fw"></i> <br />
            
            搜索
          </a>
        </li>
      
    </ul>
  

  
    <div class="site-search">
      
  <div class="popup">
 <span class="search-icon fa fa-search"></span>
 <input type="text" id="local-search-input">
 <div id="local-search-result"></div>
 <span class="popup-btn-close">close</span>
</div>


    </div>
  
</nav>



 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            

  <div id="posts" class="posts-expand">
    

  

  
  
  

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
  <link itemprop="mainEntityOfPage" href="http://codingme.xyz/2016/09/17/javascript-note-05-1/">

  <span style="display:none" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <meta itemprop="name" content="Huang SJ">
    <meta itemprop="description" content="">
    <meta itemprop="image" content="/uploads/avatar.jpg">
  </span>

  <span style="display:none" itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
    <meta itemprop="name" content="CodingMe">
    <span style="display:none" itemprop="logo" itemscope itemtype="http://schema.org/ImageObject">
      <img style="display:none;" itemprop="url image" alt="CodingMe" src="">
    </span>
  </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
            
            
              
                《 JavaScript 高级程序设计》备忘-第五章-1
              
            
          </h1>
        

        <div class="post-meta">
          <span class="post-time">
            

            

            
          </span>

          

          
            
          

          

          
          

          

          

        </div>
      </header>
    


    <div class="post-body" itemprop="articleBody">

      
      

      
        <h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>在 ECMAScript 中，<strong>引用类型</strong>是一种数据结构，用于将数据和功能组织在一起。<br>它也常被称为<strong>类</strong>，但这种称呼并不妥当。<br>ECMAScript 不具备传统的面向对象语言所支持的<strong>类和接口</strong>等基本结构。<br>引用类型有时候也被称为<strong>对象定义</strong>，因为它们描述的是一类<strong>对象所具有的属性和方法</strong>。</p>
<p>虽然引用类型与类看起来相似，但它们并不是相同的概念。<br><strong>对象(Object)是某个特定引用类型的实例。</strong><br>新对象是使用 new 操作符后跟一个构造函数来创建的。</p>
<h1 id="Object-类型"><a href="#Object-类型" class="headerlink" title="Object 类型"></a>Object 类型</h1><p>Object 是一个基础类型，其他所有类型都从 Object 继承了基本的行为。</p>
<h2 id="创建-Object-实例的方式"><a href="#创建-Object-实例的方式" class="headerlink" title="创建 Object 实例的方式"></a>创建 Object 实例的方式</h2><ol>
<li>使用 new 操作符后跟 Object 构造函数:<code>var person = new Object();</code></li>
<li><p>使用对象字面量表示法：</p>
 <figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> person = &#123;</div><div class="line">    <span class="string">"name"</span> : <span class="string">"Nicholas"</span>,</div><div class="line">    <span class="string">"age"</span> : <span class="number">29</span>,</div><div class="line">    <span class="number">5</span> : <span class="literal">true</span></div><div class="line">&#125;;</div></pre></td></tr></table></figure>
<p> 左边的花括号( { )表示对象字面量的开始，如果是在 if 语句的后面，则表示一个语句块的开始。<br> 在使用对象字面量语法时，属性名也可以使用字符串。5会自动转化为字符串。<br> 使用字面量表示法不会调用 Object 构造函数。<br> 使用对象字面量语法时，如果留空其花括号，则可以定义只包含默认属性和方法的对象。<code>var person = {}; //与 new Object()相同</code><br> 关于对象字面量语法，我们推荐只在考虑对象属性名的可读性时使用。<br> 因为这种语法要求的代码量少，而且能够给人封装数据的感觉，开发人员更青睐对象字面量语法。<br> 对象字面量也是向函数传递大量可选参数的首选方式。<br> 在函数中的使用：</p>
 <figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">displayInfo(&#123;</div><div class="line">    name: <span class="string">"Nicholas"</span>,</div><div class="line">    age: <span class="number">29</span></div><div class="line">&#125;);</div></pre></td></tr></table></figure>
<p> 最好的做法是对那些必需值使用命名参数，而使用对象字面量来封装多个可选参数。</p>
</li>
</ol>
<a id="more"></a>
<h2 id="访问对象属性的方法"><a href="#访问对象属性的方法" class="headerlink" title="访问对象属性的方法"></a>访问对象属性的方法</h2><ol>
<li>点表示法</li>
<li><p>方括号表示法(JavaScript 中)<br> 在使用方括号语法时，应该将要访问的属性以字符串的形式放在方括号中。<br> 主要优点是可以通过变量来访问属性。例如：</p>
 <figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> propertyName = <span class="string">"name"</span>;</div><div class="line">alert(person[propertyName]); <span class="comment">//"Nicholas"</span></div></pre></td></tr></table></figure>
<p> 如果属性名中包含会导致语法错误的字符，或者属性名使用的是关键字或保留字，也可以使用方括号表示法。比如带空格的属性”first name”。<br> 通常，除非必须使用变量来访问属性，否则我们建议使用点表示法。</p>
</li>
</ol>
<h1 id="Array-类型"><a href="#Array-类型" class="headerlink" title="Array 类型"></a>Array 类型</h1><ol>
<li>都是有序列表。</li>
<li>每一项可以保存任何类型的数据。</li>
<li>数组的大小是可以动态调整的。</li>
</ol>
<h2 id="创建数组的基本方式"><a href="#创建数组的基本方式" class="headerlink" title="创建数组的基本方式"></a>创建数组的基本方式</h2><ol>
<li><p>第一种:使用 Array 构造函数。</p>
 <figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> colors = <span class="keyword">new</span> <span class="built_in">Array</span>();</div><div class="line"><span class="keyword">var</span> colors = <span class="keyword">new</span> <span class="built_in">Array</span>(<span class="number">20</span>);</div><div class="line"><span class="keyword">var</span> colors = <span class="keyword">new</span> <span class="built_in">Array</span>(<span class="string">"red"</span>, <span class="string">"blue"</span>, <span class="string">"green"</span>);</div></pre></td></tr></table></figure>
<p> 在使用 Array 构造函数时也可以省略 new 操作符。</p>
</li>
<li><p>第二种:数组字面量表示法。</p>
 <figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> colors = [<span class="string">"red"</span>, <span class="string">"blue"</span>, <span class="string">"green"</span>]; <span class="comment">// 创建一个包含 3 个字符串的数组</span></div><div class="line"><span class="keyword">var</span> names = []; <span class="comment">// 创建一个空数组</span></div><div class="line"><span class="keyword">var</span> values = [<span class="number">1</span>,<span class="number">2</span>,]; <span class="comment">// 不要这样！这样会创建一个包含 2 或 3 项的数组</span></div><div class="line"><span class="keyword">var</span> options = [,,,,,]; <span class="comment">// 不要这样！这样会创建一个包含 5 或 6 项的数组</span></div></pre></td></tr></table></figure>
<p> IE 的 BUG ：在 IE 中， values 会成为一个包含 3 个项且每项的值分别为 1、2 和 undefined 的数组。<br> 原因是 IE8 及之前版本中的 ECMAScript 实现在数组字面量方面存在 bug 。<br> 所以强烈建议不要使用<code>var values = [1,2,];</code>这种写法。<br> 在使用数组字面量表示法时，也不会调用 Array 构造函数。</p>
</li>
</ol>
<h2 id="读取和设置数组"><a href="#读取和设置数组" class="headerlink" title="读取和设置数组"></a>读取和设置数组</h2><p>使用方括号并提供相应值的基于 0 的数字索引。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> colors = [<span class="string">"red"</span>, <span class="string">"blue"</span>, <span class="string">"green"</span>]; <span class="comment">// 定义一个字符串数组</span></div><div class="line">alert(colors[<span class="number">0</span>]); <span class="comment">// 显示第一项</span></div><div class="line">colors[<span class="number">2</span>] = <span class="string">"black"</span>; <span class="comment">// 修改第三项</span></div><div class="line">colors[<span class="number">3</span>] = <span class="string">"brown"</span>; <span class="comment">// 新增第四项</span></div></pre></td></tr></table></figure>
<h2 id="数组的-length"><a href="#数组的-length" class="headerlink" title="数组的 length"></a>数组的 length</h2><p>它不是只读的。因此，</p>
<ol>
<li>通过设置这个属性，可以从数组的末尾移除项或向数组中添加新项。<br> 往小了设置，可以移除最后几项；<br> 往大了设置，可以新增几项 undefined 。</li>
<li>利用 length 属性也可以方便地在数组末尾添加新项。 <figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> colors = [<span class="string">"red"</span>, <span class="string">"blue"</span>, <span class="string">"green"</span>]; <span class="comment">// 创建一个包含 3 个字符串的数组</span></div><div class="line">colors[colors.length] = <span class="string">"black"</span>; <span class="comment">// (在位置 3 )添加一种颜色</span></div><div class="line">colors[colors.length] = <span class="string">"brown"</span>; <span class="comment">// (在位置 4</span></div></pre></td></tr></table></figure>
</li>
</ol>
<p>数组最多可以包含 4 294 967 295 个项,如果超过这个上限值，就会发生异常。<br>而创建一个初始大小与这个上限值接近的数组，则可能会导致运行时间超长的脚本错误。</p>
<h2 id="检测数组"><a href="#检测数组" class="headerlink" title="检测数组"></a>检测数组</h2><p>对于 ECMAScript3 来说，使用 instanceof 。<br>存在问题：<br>如果网页包含多个框架，那实际上存在两个以上不同的全局执行环境，从而存在两个以上不同版本的 Array 构造函数。<br>解决方法：<br>ECMAScript5 新增了 Array,isArray() 方法。<br>支持 Array.isArray() 方法的浏览器有 IE9+ 、 Firefox 4+ 、 Safari 5+ 、 Opera 10.5+和 Chrome 。<br>要在尚未实现这个方法中的浏览器中准确检测数组，请参考 22 章节。</p>
<h2 id="转换方法"><a href="#转换方法" class="headerlink" title="转换方法"></a>转换方法</h2><p>所有对象都具有 toLocaleString() 、 toString() 和 valueOf() 方法。</p>
<ul>
<li>toString() ：返回由数组中每个值的字符串形式拼接而成的<strong>一个以逗号分隔的字符串</strong>。</li>
<li>valueOf() ：返回的还是数组。</li>
<li>toLocaleString()：也会创建一个数组值的以逗号分隔的字符串。为了取得每一项的值，调用的是每一项的 toLocale-String() 方法，而不是 toString() 方法。</li>
</ul>
<p>例子中使用了对象字面量表示法:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> person1 = &#123;</div><div class="line">    toLocaleString : <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</div><div class="line">    <span class="keyword">return</span> <span class="string">"Nikolaos"</span>;</div><div class="line">&#125;,</div><div class="line">toString : <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</div><div class="line">    <span class="keyword">return</span> <span class="string">"Nicholas"</span>;</div><div class="line">&#125;</div><div class="line">&#125;;</div></pre></td></tr></table></figure>
<p>如果数组中的某一项的值是 null 或者 undefined ，那么该值在 join() 、 toLocaleString() 、 toString() 和 valueOf() 方法返回的结果中以空字符串表示。</p>
<h3 id="join"><a href="#join" class="headerlink" title="join"></a>join</h3><p>如果使用 join() 方法，可以使用不同分隔符来构建字符串。<br>如果不给 join() 方法传入任何值，或者给它传入 undefined ，则使用逗号作为分隔符。<br>IE7 及更早版本会错误的使用字符串 “undefined” 作为分隔符。</p>
<h2 id="栈方法"><a href="#栈方法" class="headerlink" title="栈方法"></a>栈方法</h2><p>数组可以表现得就像栈一样，后者是一种可以限制插入和删除项的数据结构。<br>ECMAScript 为数组专门提供了 push() 和 pop() 方法，以便实现类似栈的行为。</p>
<h2 id="队列方法"><a href="#队列方法" class="headerlink" title="队列方法"></a>队列方法</h2><p>栈数据结构的访问规则是 LIFO(后进先出)，而队列数据结构的访问规则是 FIFO(First-In-First-Out ，先进先出)。<br><strong>兼容性要点</strong>： IE7 及更早版本对 JavaScript 的实现中存在一个偏差，其 unshift() 方法总是返回 undefined 而不是数组的新长度。 IE8 在非兼容模式下会返回正确的长度值。</p>
<h2 id="重排序方法"><a href="#重排序方法" class="headerlink" title="重排序方法"></a>重排序方法</h2><p> reverse() 和 sort()</p>
<p><code>sort()</code>方法是根据测试字符串的结果改变原来的顺序，所以会造成：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> values = [<span class="number">0</span>, <span class="number">1</span>, <span class="number">5</span>, <span class="number">10</span>, <span class="number">15</span>];</div><div class="line">values.sort();</div><div class="line">alert(values); <span class="comment">//0,1,10,15,5</span></div></pre></td></tr></table></figure>
<p>要解决这个问题，可以使用比较函数。<br>比较函数通过返回一个小于零、等于零或大于零的值来影响排序结果。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">compare</span>(<span class="params">value1, value2</span>) </span>&#123;</div><div class="line">    <span class="keyword">if</span> (value1 &lt; value2) &#123;</div><div class="line">        <span class="keyword">return</span> <span class="number">-1</span>;</div><div class="line">    &#125; <span class="keyword">else</span> <span class="keyword">if</span> (value1 &gt; value2) &#123;</div><div class="line">        <span class="keyword">return</span> <span class="number">1</span>;</div><div class="line">    &#125; <span class="keyword">else</span> &#123;</div><div class="line">        <span class="keyword">return</span> <span class="number">0</span>;</div><div class="line">    &#125;</div><div class="line">&#125;</div><div class="line"></div><div class="line"><span class="keyword">var</span> values = [<span class="number">0</span>, <span class="number">1</span>, <span class="number">5</span>, <span class="number">10</span>, <span class="number">15</span>];</div><div class="line">values.sort(compare);</div><div class="line">alert(values); <span class="comment">//0,1,5,10,15</span></div></pre></td></tr></table></figure>
<p>对于数值类型或者其 valueOf() 方法会返回数值类型的对象类型，可以使用一个更简单的比较函数。这个函数只要用第二个值减第一个值即可。</p>
<h2 id="操作方法"><a href="#操作方法" class="headerlink" title="操作方法"></a>操作方法</h2><ul>
<li>concat() 方法：<br>  基于当前数组中的所有项创建一个新数组。<br>  具体来说，这个方法会先创建当前数组一个副本，然后将接收到的参数添加到这个副本的末尾，最后返回新构建的数组。<br>  没有给 concat() 方法传递参数的情况下，它只是复制当前数组并返回副本。<br>  如果传递给 concat() 方法的是一或多个数组，则该方法会将这些数组中的每一项都添加到结果数组中。<br>  concat() 方法不会影响原始数组。</li>
<li>slice()方法：<br>  基于当前数组中的一或多个项创建一个新数组。<br>  slice() 方法可以接受一或两个参数，即要返回项的起始和结束位置。<br>  在只有一个参数的情况下， slice() 方法返回从该参数指定位置开始到当前数组末尾的所有项。<br>  slice() 方法不会影响原始数组。<br>  要点：如果 slice() 方法的参数中有一个负数，则用数组长度加上该数来确定相应的位置。<br>  在一个包含 5 项的数组上调用 slice(-2,-1) 与调用 slice(3,4) 得到的结果相同。如果结束位置小于起始位置，则返回空数组。</li>
<li>splice() 方法：<br>  恐怕要算是最强大的数组方法。<br>  splice() 方法始终都会返回一个数组，该数组中包含从原始数组中删除的项(如果没有删除任何项，则返回一个空数组)。<br>  使用方式有3种：<ul>
<li><strong>删除</strong>：<br>可以删除任意数量的项。<br>只需指定 2 个参数：要删除的第一项的位置，要删除的项数。<br>例如， splice(0,2) 会删除数组中的前两项。</li>
<li><strong>插入</strong>：可以向指定位置插入任意数量的项。<br>只需提供 3 个参数：起始位置，0(要删除的项数)，要插入的项。<br>如果要插入多个项，可以再传入第四、第五，以至任意多个项。</li>
<li><strong>替换</strong>：可以向指定位置插入任意数量的项，且同时删除任意数量的项。<br>只需指定 3 个参数：起始位置，要删除的项数，要插入的任意数量的项。<br>插入的项数不必与删除的项数相等。</li>
</ul>
</li>
</ul>
<h2 id="位置方法"><a href="#位置方法" class="headerlink" title="位置方法"></a>位置方法</h2><p>ECMAScript 5 新增的两个位置方法。 indexOf() 和 lastIndexOf() 。<br>indexOf() 方法从数组的开头(位置 0)开始向后查找， lastIndexOf() 方法则从数组的末尾开始向前查找。<br>这两个方法在比较查找的项时，都使用全等操作符(===)</p>
<p>支持它们的浏览器包括 IE9+ 、 Firefox 2+ 、 Safari 3+ 、 Opera 9.5+和 Chrome 。<br>(也就是说，对于 IE7、8 来说，这两个位置方法不能用..)</p>
<h2 id="迭代方法"><a href="#迭代方法" class="headerlink" title="迭代方法"></a>迭代方法</h2><p>ECMAScript 5 为数组定义了 5 个迭代方法。<br>支持这些迭代方法的浏览器有 IE9+ 、 Firefox 2+ 、 Safari 3+ 、 Opera 9.5+和 Chrome 。<br>(一个问题：也就是说 ECMAScript3 不支持吧？跟前面的位置方法一样，如果要兼容 IE7、8 ，就得考虑迭代方法的兼容问题)<br>每个方法都接收两个参数：要在每一项上运行的<strong>函数</strong>，(可选的)运行该函数的<strong>作用域对象</strong>——影响 <strong>this</strong> 的值。<br>传入这些方法中的函数会接收三个参数：数组项的值，该项在数组中的位置，数组对象本身。</p>
<ul>
<li>every() ：对数组中的每一项运行给定函数，如果该函数对每一项都返回 true ，则返回 true 。<br>  使用示例：数组中每个值都大于2的话，则返回 true 。</li>
<li>filter() ：对数组中的每一项运行给定函数，返回该函数会返回 true 的项组成的数组。<br>  使用示例：返回 数组中所有大于2的值 的数组。</li>
<li>forEach() ：对数组中的每一项运行给定函数。这个方法没有返回值。<br>  使用示例：基本等同于 for 语句。</li>
<li>map() ：对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组。<br>  使用示例：返回 数组中所有值乘以2 的数组。</li>
<li>some() ：对数组中的每一项运行给定函数，如果该函数对任一项返回 true ，则返回 true 。<br>  使用示例：数组中有一个值大于2的话，返回 true 。</li>
</ul>
<p>以上方法都不会修改数组中的包含的值。<br>every()就像是 与， some()就像是 或。两者都返回布尔值。</p>
<h2 id="归并方法"><a href="#归并方法" class="headerlink" title="归并方法"></a>归并方法</h2><p>ECMAScript 5 新增了两个归并数组的方法： reduce() 和 reduceRight() 。<br>支持这些归并方法的浏览器有 IE9+ 、 Firefox 2+ 、 Safari 3+ 、 Opera 9.5+和 Chrome 。<br>(一个问题：又是说 ECMAScript3 不支持吧？跟前面的迭代方法一样，如果要兼容 IE7、8 ，就得考虑归并方法的兼容问题)<br>reduce() 方法从数组的第一项开始，逐个遍历到最后。而 reduceRight() 则从数组的最后一项开始，向前遍历到第一项。<br>都接收两个参数：一个在每一项上调用的函数，(可选的)作为归并基础的初始值。<br>reduce() 和 reduceRight() 的函数接收 4 个参数：前一个值，当前值，项的索引，数组对象。<br>求和示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> values = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>];</div><div class="line"><span class="keyword">var</span> sum = values.reduce(<span class="function"><span class="keyword">function</span>(<span class="params">prev, cur, index, array</span>)</span>&#123;</div><div class="line">    <span class="keyword">return</span> prev + cur;</div><div class="line">&#125;);</div><div class="line">alert(sum); <span class="comment">//15</span></div></pre></td></tr></table></figure>
<p>reduceRight() 的作用类似，方向相反。</p>

      
    </div>

    <div>
      
        

      
    </div>

    <div>
      
        

      
    </div>


    <footer class="post-footer">
      
        <div class="post-tags">
          
            <a href="/tags/Web/" rel="tag"># Web</a>
          
            <a href="/tags/JavaScript/" rel="tag"># JavaScript</a>
          
        </div>
      

      
        <div class="post-nav">
          <div class="post-nav-next post-nav-item">
            
              <a href="/2016/09/17/javascript-note-04/" rel="next" title="《 JavaScript 高级程序设计》备忘-第四章">
                <i class="fa fa-chevron-left"></i> 《 JavaScript 高级程序设计》备忘-第四章
              </a>
            
          </div>

          <span class="post-nav-divider"></span>

          <div class="post-nav-prev post-nav-item">
            
              <a href="/2016/09/19/javascript-note-05-2/" rel="prev" title="《 JavaScript 高级程序设计》备忘-第五章-2">
                《 JavaScript 高级程序设计》备忘-第五章-2 <i class="fa fa-chevron-right"></i>
              </a>
            
          </div>
        </div>
      

      
      
    </footer>
  </article>



    <div class="post-spread">
      
    </div>
  </div>


          </div>
          


          
  <div class="comments" id="comments">
    
  </div>


        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    <div class="sidebar-inner">

      

      
        <ul class="sidebar-nav motion-element">
          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap" >
            文章目录
          </li>
          <li class="sidebar-nav-overview" data-target="site-overview">
            站点概览
          </li>
        </ul>
      

      <section class="site-overview sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
          <img class="site-author-image" itemprop="image"
               src="/uploads/avatar.jpg"
               alt="Huang SJ" />
          <p class="site-author-name" itemprop="name">Huang SJ</p>
          <p class="site-description motion-element" itemprop="description"></p>
        </div>
        <nav class="site-state motion-element">
          <div class="site-state-item site-state-posts">
            <a href="/archives">
              <span class="site-state-item-count">75</span>
              <span class="site-state-item-name">日志</span>
            </a>
          </div>

          
            <div class="site-state-item site-state-categories">
              <a href="/categories">
                <span class="site-state-item-count">4</span>
                <span class="site-state-item-name">分类</span>
              </a>
            </div>
          

          
            <div class="site-state-item site-state-tags">
              <a href="/tags">
                <span class="site-state-item-count">9</span>
                <span class="site-state-item-name">标签</span>
              </a>
            </div>
          

        </nav>

        

        <div class="links-of-author motion-element">
          
            
              <span class="links-of-author-item">
                <a href="https://github.com/hsj1992" target="_blank" title="GitHub">
                  
                    <i class="fa fa-fw fa-github"></i>
                  
                  GitHub
                </a>
              </span>
            
              <span class="links-of-author-item">
                <a href="https://twitter.com/hsj9527" target="_blank" title="Twitter">
                  
                    <i class="fa fa-fw fa-twitter"></i>
                  
                  Twitter
                </a>
              </span>
            
              <span class="links-of-author-item">
                <a href="http://weibo.com/u/1694147905" target="_blank" title="Weibo">
                  
                    <i class="fa fa-fw fa-weibo"></i>
                  
                  Weibo
                </a>
              </span>
            
              <span class="links-of-author-item">
                <a href="https://www.freecodecamp.cn/hsj1992" target="_blank" title="FreeCodeCamp">
                  
                    <i class="fa fa-fw fa-fire"></i>
                  
                  FreeCodeCamp
                </a>
              </span>
            
              <span class="links-of-author-item">
                <a href="http://codepen.io/hsj1992/" target="_blank" title="codepen">
                  
                    <i class="fa fa-fw fa-codepen"></i>
                  
                  codepen
                </a>
              </span>
            
              <span class="links-of-author-item">
                <a href="http://hsj1992.oschina.io/" target="_blank" title="码云镜像">
                  
                    <i class="fa fa-fw fa-code"></i>
                  
                  码云镜像
                </a>
              </span>
            
              <span class="links-of-author-item">
                <a href="https://hsj1992.coding.me/" target="_blank" title="coding镜像">
                  
                    <i class="fa fa-fw fa-code"></i>
                  
                  coding镜像
                </a>
              </span>
            
              <span class="links-of-author-item">
                <a href="https://hsj1992.github.io/" target="_blank" title="github镜像">
                  
                    <i class="fa fa-fw fa-code"></i>
                  
                  github镜像
                </a>
              </span>
            
              <span class="links-of-author-item">
                <a href="https://codingme-6dd8a.firebaseapp.com" target="_blank" title="Firebase镜像">
                  
                    <i class="fa fa-fw fa-google"></i>
                  
                  Firebase镜像
                </a>
              </span>
            
          
        </div>

        
        

        
        

        


      </section>

      
      <!--noindex-->
        <section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
          <div class="post-toc">

            
              
            

            
              <div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#前言"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#Object-类型"><span class="nav-number">2.</span> <span class="nav-text">Object 类型</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#创建-Object-实例的方式"><span class="nav-number">2.1.</span> <span class="nav-text">创建 Object 实例的方式</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#访问对象属性的方法"><span class="nav-number">2.2.</span> <span class="nav-text">访问对象属性的方法</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#Array-类型"><span class="nav-number">3.</span> <span class="nav-text">Array 类型</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#创建数组的基本方式"><span class="nav-number">3.1.</span> <span class="nav-text">创建数组的基本方式</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#读取和设置数组"><span class="nav-number">3.2.</span> <span class="nav-text">读取和设置数组</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#数组的-length"><span class="nav-number">3.3.</span> <span class="nav-text">数组的 length</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#检测数组"><span class="nav-number">3.4.</span> <span class="nav-text">检测数组</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#转换方法"><span class="nav-number">3.5.</span> <span class="nav-text">转换方法</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#join"><span class="nav-number">3.5.1.</span> <span class="nav-text">join</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#栈方法"><span class="nav-number">3.6.</span> <span class="nav-text">栈方法</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#队列方法"><span class="nav-number">3.7.</span> <span class="nav-text">队列方法</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#重排序方法"><span class="nav-number">3.8.</span> <span class="nav-text">重排序方法</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#操作方法"><span class="nav-number">3.9.</span> <span class="nav-text">操作方法</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#位置方法"><span class="nav-number">3.10.</span> <span class="nav-text">位置方法</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#迭代方法"><span class="nav-number">3.11.</span> <span class="nav-text">迭代方法</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#归并方法"><span class="nav-number">3.12.</span> <span class="nav-text">归并方法</span></a></li></ol></li></ol></div>
            

          </div>
        </section>
      <!--/noindex-->
      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <div class="copyright" >
  
  &copy;  2015 - 
  <span itemprop="copyrightYear">2016</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">Huang SJ</span>
</div>


<div class="powered-by">
  由 <a class="theme-link" href="https://hexo.io">Hexo</a> 强力驱动
</div>

<div class="theme-info">
  主题 -
  <a class="theme-link" href="https://github.com/iissnan/hexo-theme-next">
    NexT.Pisces
  </a>
</div>


        

        
      </div>
    </footer>

    <div class="back-to-top">
      <i class="fa fa-arrow-up"></i>
    </div>
  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  



  
  <script type="text/javascript" src="//cdn.staticfile.org/jquery/2.1.3/jquery.min.js"></script>

  
  <script type="text/javascript" src="//cdn.staticfile.org/fastclick/1.0.6/fastclick.min.js"></script>

  
  <script type="text/javascript" src="//cdn.staticfile.org/jquery_lazyload/1.9.7/jquery.lazyload.min.js"></script>

  
  <script type="text/javascript" src="//cdn.staticfile.org/velocity/1.2.1/velocity.min.js"></script>

  
  <script type="text/javascript" src="//cdn.staticfile.org/velocity/1.2.1/velocity.ui.min.js"></script>

  
  <script type="text/javascript" src="//cdn.staticfile.org/fancybox/2.1.5/jquery.fancybox.pack.js"></script>


  


  <script type="text/javascript" src="/js/src/utils.js?v=5.1.0"></script>

  <script type="text/javascript" src="/js/src/motion.js?v=5.1.0"></script>



  
  


  <script type="text/javascript" src="/js/src/affix.js?v=5.1.0"></script>

  <script type="text/javascript" src="/js/src/schemes/pisces.js?v=5.1.0"></script>



  
  <script type="text/javascript" src="/js/src/scrollspy.js?v=5.1.0"></script>
<script type="text/javascript" src="/js/src/post-details.js?v=5.1.0"></script>



  


  <script type="text/javascript" src="/js/src/bootstrap.js?v=5.1.0"></script>



  



  




	




  
  
  <script type="text/javascript">
    // Popup Window;
    var isfetched = false;
    // Search DB path;
    var search_path = "search.xml";
    if (search_path.length == 0) {
      search_path = "search.xml";
    }
    var path = "/" + search_path;
    // monitor main search box;

    function proceedsearch() {
      $("body").append('<div class="popoverlay">').css('overflow', 'hidden');
      $('.popup').toggle();
    }
    // search function;
    var searchFunc = function(path, search_id, content_id) {
      'use strict';
      $.ajax({
        url: path,
        dataType: "xml",
        async: true,
        success: function( xmlResponse ) {
          // get the contents from search data
          isfetched = true;
          $('.popup').detach().appendTo('.header-inner');
          var datas = $( "entry", xmlResponse ).map(function() {
            return {
              title: $( "title", this ).text(),
              content: $("content",this).text(),
              url: $( "url" , this).text()
            };
          }).get();
          var $input = document.getElementById(search_id);
          var $resultContent = document.getElementById(content_id);
          $input.addEventListener('input', function(){
            var matchcounts = 0;
            var str='<ul class=\"search-result-list\">';
            var keywords = this.value.trim().toLowerCase().split(/[\s\-]+/);
            $resultContent.innerHTML = "";
            if (this.value.trim().length > 1) {
              // perform local searching
              datas.forEach(function(data) {
                var isMatch = false;
                var content_index = [];
                var data_title = data.title.trim().toLowerCase();
                var data_content = data.content.trim().replace(/<[^>]+>/g,"").toLowerCase();
                var data_url = decodeURIComponent(data.url);
                var index_title = -1;
                var index_content = -1;
                var first_occur = -1;
                // only match artiles with not empty titles and contents
                if(data_title != '') {
                  keywords.forEach(function(keyword, i) {
                    index_title = data_title.indexOf(keyword);
                    index_content = data_content.indexOf(keyword);
                    if( index_title >= 0 || index_content >= 0 ){
                      isMatch = true;
                      if (i == 0) {
                        first_occur = index_content;
                      }
                    }

                  });
                }
                // show search results
                if (isMatch) {
                  matchcounts += 1;
                  str += "<li><a href='"+ data_url +"' class='search-result-title'>"+ data_title +"</a>";
                  var content = data.content.trim().replace(/<[^>]+>/g,"");
                  if (first_occur >= 0) {
                    // cut out 100 characters
                    var start = first_occur - 20;
                    var end = first_occur + 80;
                    if(start < 0){
                      start = 0;
                    }
                    if(start == 0){
                      end = 50;
                    }
                    if(end > content.length){
                      end = content.length;
                    }
                    var match_content = content.substring(start, end);
                    // highlight all keywords
                    keywords.forEach(function(keyword){
                      var regS = new RegExp(keyword, "gi");
                      match_content = match_content.replace(regS, "<b class=\"search-keyword\">"+keyword+"</b>");
                    });

                    str += "<p class=\"search-result\">" + match_content +"...</p>"
                  }
                  str += "</li>";
                }
              })};
            str += "</ul>";
            if (matchcounts == 0) { str = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>' }
            if (keywords == "") { str = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>' }
            $resultContent.innerHTML = str;
          });
          proceedsearch();
        }
      });}

    // handle and trigger popup window;
    $('.popup-trigger').click(function(e) {
      e.stopPropagation();
      if (isfetched == false) {
        searchFunc(path, 'local-search-input', 'local-search-result');
      } else {
        proceedsearch();
      };
    });

    $('.popup-btn-close').click(function(e){
      $('.popup').hide();
      $(".popoverlay").remove();
      $('body').css('overflow', '');
    });
    $('.popup').click(function(e){
      e.stopPropagation();
    });
  </script>


  

  

  

  


</body>
</html>
